<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--组织数据-->
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          size="mini"
          class="queryForm"
          label-width="68px"
        >
          <el-form-item prop="requestId">
            <el-input
              v-model="queryParams.requestId"
              placeholder="流水号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="orgCode">
            <el-input
              v-model="queryParams.orgCode"
              placeholder="组织编码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="sync_isSuccess">
            <el-select
              v-model="queryParams.sync_isSuccess"
              placeholder="执行状态"
              clearable
            >
              <el-option label="全部" value="" />
              <el-option label="成功" value="1" />
              <el-option label="失败" value="2" />
              <el-option label="未处理" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item prop="sync_transactionType">
            <el-select
              v-model="queryParams.sync_transactionType"
              placeholder="操作类型"
              clearable
            >
              <el-option label="新增" value="1" />
              <el-option label="修改" value="2" />
              <el-option label="删除" value="3" />
              <el-option label="移动" value="10" />
            </el-select>
          </el-form-item>
          <el-form-item prop="sync_createTime">
            <div class="block">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                size="mini"
                style="width: 280px"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="getTime"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            ></el-form-item
          >
        </el-form>

        <el-table
          class="data-table dense-table"
          v-loading="fetching"
          :data="logList"
          tooltip-effect="dark"
        >
          <el-table-column
            label="流水号"
            key="requestId"
            width="200px"
            prop="requestId"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="组织编码"
            width="150px"
            key="orgCode"
            prop="orgCode"
          />
          <el-table-column
            label="执行状态"
            width="100px"
            key="sync_isSuccess"
            prop="sync_isSuccess"
            :formatter="isSuccessFormat"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="请求结果"
            key="sync_message"
            prop="sync_message"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="操作类型"
            width="100px"
            key="sync_transactionType"
            prop="sync_transactionType"
            :formatter="transationTypeFormat"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="请求时间"
            width="200px"
            key="sync_createTime"
            prop="sync_createTime"
            :show-overflow-tooltip="false"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.sync_createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="80px"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="
                  () => {
                    currentLog = scope.row;
                    logDetailDrawerVisible = true;
                  }
                "
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 用户详情抽屉 -->

    <el-drawer
      :visible.sync="logDetailDrawerVisible"
      v-if="currentLog"
      size="600px"
      :modal="false"
    >
      <h3 slot="title">操作日志详情</h3>
      <div class="info-container" style="padding: 20px 15px">
        <Description-form :data="currentLog">
          <Description-item label="流水号" prop="requestId" />
          <Description-item label="组织编码" prop="orgCode" />
          <Description-item
            label="执行状态"
            prop="sync_isSuccess"
            :formatter="isSuccessFormats"
          />
          <Description-item
            label="操作类型"
            prop="sync_transactionType"
            :formatter="transationTypeFormats"
          />
          <Description-item label="请求时间" prop="sync_createTime" />
          <Description-item label="操作时间" prop="sync_updateTime" />
          <Description-item label="请求结果" prop="sync_message">
            <el-input
              type="textarea"
              :value="currentLog.sync_message"
              :style="{ width: '340px' }"
              :autosize="{ minRows: 4, maxRows: 10 }"
            >
            </el-input>
          </Description-item>
        </Description-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getLogListRequst } from "@/api/interfaceLog/organization";
const dict = { 1: "新增", 2: "修改", 3: "删除", 10: "移动" };
const dicts = { 0: "处理中", 1: "成功", 2: "失败" };
export default {
  name: "organization",
  data() {
    return {
      // 遮罩层
      loading: true,

      // 显示搜索条件
      showSearch: true,

      // 用户表格数据
      logList: null,
      // 弹出层标题
      title: "",
      total: 0,
      // 日期范围
      dateRange: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        requestId: undefined,
        orgCode: undefined,
        sync_transactionType: undefined,
        sync_isSuccess: undefined,
        maxDate: undefined,
        minDate: undefined,
      },

      //用户详情抽屉
      currentLog: null,
      logDetailDrawerVisible: false,

      fetching: false,
      behaviorTypeOptions: [
        { key: "Login", value: "Login" },
        { key: "Operation", value: "Operation" },
        { key: "See", value: "See" },
        { key: "Exception", value: "Exception" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },

  created() {
    this.getList();
  },
  methods: {
    /** 查询用户列表 */
    async getList() {
      this.fetching = true;
      this.loading = true;
      console.log(this.queryParams);
      getLogListRequst(this.queryParams)
        .then((response) => {
          console.log(response);
          this.logList = response.data.data;
          this.total = response.data.pagination.dataCount;
          this.loading = false;
          this.fetching = false;
        })
        .catch(() => (this.fetching = false));
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      console.log(this.$refs["queryForm"]);
      this.$refs["queryForm"].resetFields();
      this.queryParams.maxDate = undefined;
      this.queryParams.minDate = undefined;
      this.handleQuery();
    },
    /**执行类型 */
    transationTypeFormat(row, column) {
      return dict[row.sync_transactionType];
    },

    transationTypeFormats(val) {
      return dict[val];
    },
    /**执行状态 */
    isSuccessFormat(row, column) {
      return dicts[row.sync_isSuccess];
    },
    isSuccessFormats(val) {
      return dicts[val];
    },
    getTime(data) {
      if (data && data.length == 2) {
        this.queryParams.minDate = data[0];
        this.queryParams.maxDate = data[1];
      } else {
        this.queryParams.minDate = null;
        this.queryParams.maxDate = null;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  //   ::v-deep .data-table.el-table {
  //     tr td {
  //       padding: 0;
  //     }
  //   }
}
</style>
